<template>
  <div class="index root">
    <!-- <div class="main">
      <home v-if="active == 0" />
      <taskHouse v-if="active == 1" />
      <publishTask v-if="active == 2" />
      <wallet v-if="active == 3" />
      <mine v-if="active == 4" />
    </div> -->
    <router-view />

    <div class="tabbar">
      <div class="tab-item" @click="change(0)">
        <div class="icon">
          <img v-if="active !== 0" src="@/assets/images/tabbar/1.png" />
          <img v-if="active === 0" src="@/assets/images/tabbar/2.png" />
        </div>
        <div class="name" :class="active == 0 ? 'change' : ''">首页</div>
      </div>

      <div class="tab-item" @click="change(1)">
        <div class="icon">
          <img v-if="active !== 1" src="@/assets/images/tabbar/3.png" />
          <img v-if="active === 1" src="@/assets/images/tabbar/4.png" />
        </div>
        <div class="name" :class="active == 1 ? 'change' : ''">大厅</div>
      </div>

      <div class="tab-item" @click="change(2)">
        <div class="icon">
          <img class="big" src="@/assets/images/tabbar/9.png" />
        </div>
        <div class="name" :class="active == 2 ? 'change' : ''"></div>
      </div>

      <div class="tab-item" @click="change(3)">
        <div class="icon">
          <img v-if="active !== 3" src="@/assets/images/tabbar/5.png" />
          <img v-if="active === 3" src="@/assets/images/tabbar/6.png" />
        </div>
        <div class="name" :class="active == 3 ? 'change' : ''">钱包</div>
      </div>

      <div class="tab-item" @click="change(4)">
        <div class="icon">
          <img v-if="active !== 4" src="@/assets/images/tabbar/7.png" />
          <img v-if="active === 4" src="@/assets/images/tabbar/8.png" />
        </div>
        <div class="name" :class="active == 4 ? 'change' : ''">我的</div>
      </div>
    </div>
  </div>
</template>
<script>
import home from "@/view/home/home.vue";
import taskHouse from "@/view/taskHouse/taskHouse.vue";
import publishTask from "@/view/publishTask/publishTask.vue";
import wallet from "@/view/mine/wallet.vue";
import mine from "@/view/mine/mine.vue";

export default {
  name: "index",
  components: {
    [home.name]: home,
    [taskHouse.name]: taskHouse,
    [publishTask.name]: publishTask,
    [wallet.name]: wallet,
    [mine.name]: mine,
  },
  data() {
    return {
      active: 0,
    };
  },
  created() {
    let type = this.$router.history.current.meta.type;
    this.active = type;
    // let a = this.getUrlKey(id);
    let sendtypes = this.$route.query.id;
    if (typeof sendtypes != "undefined") {
      if (this.$route.query.id) {
        this.active = this.$route.query.id;
      }
    }
    // this.showtype = this.$router.history.current.meta.type;
    // this.active = this.$router.history.current.meta.type;
  },
  methods: {
    change(active) {
      if (active != this.active) {
        this.active = active;
        switch (active) {
          case 0:
            this.$router.push("/home");
            break;

          case 1:
            this.$router.push("/taskHouse");
            break;

          case 2:
            this.$router.push("/publishTask");
            break;

          case 3:
            this.$router.push("/wallet");
            break;

          case 4:
            this.$router.push("/mine");
            break;

          default:
            break;
        }
      }
    },
  },
};
</script>
<style scoped lang="scss">
.index {
  background: #f5f5f5;
  min-height: 100vh;
  width: 100vw;

  .main {
    width: 100%;
    height: calc(100vh - 166rem);
  }

  .tabbar {
    position: fixed;
    bottom: 0;
    background-color: #fff;
    height: 166rem;
    width: 100%;
    display: flex;
    box-shadow: 0px -4rem 20rem rgba(88, 88, 88, 0.1);

    .tab-item {
      font-size: 24rem;
      flex: 1;
      padding-top: 20rem;

      .icon {
        img {
          width: 44rem;
          height: 44rem;
        }

        .big {
          width: 92rem;
          height: 92rem;
          margin-top: -10rem;
        }
      }

      .name {
        color: #999;
        font-size: 24rem;
      }

      .change {
        color: var(--theme);
      }
    }
  }
}
</style>
